<!-- 自动化实验-任务进程总览-实验统计饼图 -->
<template>
  <div :id="id" ref="id"></div>
</template>

<script>
  export default {
    props: {
      id: {
        type: String,
      },
      data: {
        type: Array,
      },
    },
    mounted() {
      setTimeout(() => {
        this.init();
      }, 2100);
    },
    methods: {
      init() {
        let myChart = echarts.init(document.getElementById(this.id));
        var colors = [
          "#fe9800",
          "#23C2DB",
          "#D4EC59",
          "#FFE88E",
          "#FEB64D",
          "#dd2559",
          "#30cb13",
          "#cc45f4",
          "#5B6E96",
          "#a8dffa",
          "#62D9AD",
          "#5AAEF3",
          "#ffdc4c",
          "#FF974C",
          "#E65A56",
          "#6D61E4",
          "#4A6FE2",
          "#6D9AE7",
        ];

        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          color: colors,
          series: [{
            name: '实验统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              normal: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                formatter: '{total|' + this.data.data2 +'}'+ '\n\r' + '{active|总实验数}',
                rich: {
                  total:{
                    fontSize: 35,
                    fontFamily : "微软雅黑",
                    color:'#454c5c'
                  },
                  active: {
                    fontFamily : "微软雅黑",
                    fontSize: 16,
                    color:'#6c7a89',
                    lineHeight:30,
                  },
                }
              },
              emphasis: {//中间文字显示
                show: true,
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data.data
          }]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      },
    },
  };
</script>

<style scoped>
</style>
